<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="../Vue.js"></script>
  <style>
    [v-cloak]{
      display:none;
    }
  </style>
</head>
<body>
<!--这是mvvm的v层-->
<div id="app">
<!--  插值表达式只会替换掉占位符位置的值，如果网速较慢会出现{{mess}}。v-cloak可以将display设置成隐藏，就会消除网速慢时的闪烁问题-->
<p v-cloak>{{mess}}</p>
<!-- v-text会将标签内的内容全部替换 -->
<p v-text="msg1">----=====</p>
<!--  v-html 也会将标签中的元素隐藏，但是会将msg中的元素以 html形式解析 输出 ：我是h1-->
  <p v-html="msg1">----=====</p>
  <input type="button" id="input" :title="msg3" value="按钮" @click="show">

</div>


<script>
<!-- 这是mvvm的 m层-->
  var vm = new Vue({
    el:'#app',
    //这里是m层
    data:{
      mess:'欢迎再次学习vue',
      msg1:'<h1>我是h1</h1>',
      msg3:'欢迎使用title标签 用属性绑定'

    },
    methods:{
      show:function(){
      alert('欢迎使用click标签，用事件绑定');
      },
    },

  })
</script>
</body>

</html>
